<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/30 0030
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../inc/header.jsp"></jsp:include>
<!-- Page Heading Section Start -->
<div class="page-heading-section section bg-parallax" data-bg-image="<%=path%>/assets/images/bg/bg-1.jpg" data-overlay="50">
    <div class="container">
        <div class="page-heading-content text-center">
            <h3 class="title">浏览公司</h3>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="<%=path%>/web/index">网站首页</a></li>
                <li class="breadcrumb-item active">公司列表</li>
            </ol>
        </div>
    </div>
</div>
<!-- Page Heading Section End -->

<!-- Company List Start -->
<div class="section section-padding">
    <div class="container">
        <div class="row mb-n5">

            <div class="col-lg-8 col-12 mb-5 pr-lg-5">

                <!-- Company List Wrap Start -->
                <div class="company-list-wrap row">

                    <c:forEach items="${pageInfo.list}" var="company">
                        <!-- Company List Start -->
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6 col-12">
                            <a href="<%=path%>/web/company/companyInfo?companyId=${company.id}" class="company-list">
                                <span class="company-logo"><img src="<%=path%>/assets/images/companies/${company.logo}" alt="company-1"></span>
                                <h6 class="title">${company.companyName}</h6>
                                <span class="open-job">已发布666个岗位</span>
                                <span class="location"><i class="fa fa-map-o"></i>${company.city.cityName}</span>
                            </a>
                        </div>
                        <!-- Company List Start -->
                    </c:forEach>

                </div>
                <!-- Company List Wrap Start -->

                <!-- Pagination Start -->
                <ul class="pagination pagination-center mt-5">

                    <li class="page-item"><a class="page-link" id="prePage" data-id="${pageInfo.pageNum-1}"><i class="fa fa-angle-left"></i></a></li>

                    <c:if test="${pageInfo.pages>=5}">
                        <c:if test="${pageInfo.pageNum>=3 && pageInfo.pageNum<=pageInfo.pages-2}">
                            <c:forEach begin="${pageInfo.pageNum-2}" end="${pageInfo.pageNum+2}" var="stat">
                                <c:if test="${stat eq pageInfo.pageNum}">
                                    <li class="page-item active"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                                <c:if test="${stat ne pageInfo.pageNum}">
                                    <li class="page-item"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                            </c:forEach>
                        </c:if>
                        <c:if test="${pageInfo.pageNum<3}">
                            <c:forEach begin="1" end="5" var="stat">
                                <c:if test="${stat eq pageInfo.pageNum}">
                                    <li class="page-item active"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                                <c:if test="${stat ne pageInfo.pageNum}">
                                    <li class="page-item"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                            </c:forEach>
                        </c:if>
                        <c:if test="${pageInfo.pageNum>pageInfo.pages-2}">
                            <c:forEach begin="${pageInfo.pages-4}" end="${pageInfo.pages}" var="stat">
                                <c:if test="${stat eq pageInfo.pageNum}">
                                    <li class="page-item active"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                                <c:if test="${stat ne pageInfo.pageNum}">
                                    <li class="page-item"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                                </c:if>
                            </c:forEach>
                        </c:if>
                    </c:if>
                    <c:if test="${pageInfo.pages<5}">
                        <c:forEach begin="1" end="${pageInfo.pages}" var="stat">
                            <c:if test="${stat eq pageInfo.pageNum}">
                                <li class="page-item active"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                            </c:if>
                            <c:if test="${stat ne pageInfo.pageNum}">
                                <li class="page-item"><a class="page-link" id="page${stat}" data-id="${stat}">${stat}</a></li>
                            </c:if>
                        </c:forEach>
                    </c:if>

                    <li class="page-item"><a class="page-link" id="nextPage" data-id="${pageInfo.pageNum+1}"><i class="fa fa-angle-right"></i></a></li>

                </ul>
                <!-- Pagination End -->

            </div>

            <!-- Company Sidebar Wrap Start -->
            <div class="col-lg-4 col-12 mb-5">
                <div class="sidebar-wrap">
                    <!-- Sidebar (Search) Start -->
                    <div class="sidebar-widget">
                        <div class="inner">
                            <h6 class="title">查找公司</h6>
                                <div class="row">
                                    <div class="col-12 mb-3"><input type="text" id="companyName" placeholder="公司名称"></div>
                                    <div class="col-12 mb-3">
                                        <label>所在城市</label>
                                        <input type="text" id="city" placeholder="城市">
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label>公司规模</label>
                                        <select id="scope">
                                            <option value="0">不限</option>
                                            <option value="1">&lt; 10 人</option>
                                            <option value="2">10 ~ 50 人</option>
                                            <option value="3">50 ~ 200 人</option>
                                            <option value="4">200 ~ 500 人</option>
                                            <option value="5">500 ~ 2000 人</option>
                                            <option value="6">&gt; 2000 人</option>
                                        </select>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <input class="btn btn-primary w-100" id="mybtn" type="button" value="Search">
                                    </div>
                                </div>
                        </div>
                    </div>
                    <!-- Sidebar (Search) End -->

                    <!-- Sidebar (Search) Start -->
                    <div class="sidebar-widget">
                        <div class="inner">
                            <a class="banner" href="https://hasthemes.com/plugins/ht-mega-pro/" target="_blank"><img src="<%=path%>/assets/images/banner/banner-1.jpg" alt="Banner"></a>
                        </div>
                    </div>
                    <!-- Sidebar (Search) End -->
                </div>
            </div>
            <!-- Company Sidebar Wrap End -->

        </div>
    </div>
</div>
<!-- Company List End -->

<script type="text/javascript" src="<%=path%>/assets/js/vendor/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        function getValue(pageNum,companyName,city,scope){
            $.ajax({
                url:"<%=path%>/web/company/companyListData",
                type:"post",
                data:{pageNum:pageNum,companyName:companyName,city:city,scope:scope},
                success:function (data) {
                    $(".col-lg-8").html(data);
                }
            });
        }
        $("#mybtn").click(function () {
            var pageNum = 1;
            var companyName = $("#companyName").val();
            var city = $("#city").val();
            var scope = $("#scope").val();
            getValue(pageNum,companyName,city,scope);
        });


        $.each($("a[id^=page]"),function () {
            $(this).on("click",$(".col-lg-8"),function () {
                var pageNum = $(this).attr("data-id");
                var companyName = $("#companyName").val();
                var city = $("#city").val();
                var scope = $("#scope").val();
                getValue(pageNum,companyName,city,scope);
            })
        });
        $("#prePage").on("click",$(".col-lg-8"),function () {
            var pageNum = $("#prePage").attr("data-id");
            if(pageNum<=0){
                pageNum = 1;
            }
            var companyName = $("#companyName").val();
            var city = $("#city").val();
            var scope = $("#scope").val();
            getValue(pageNum,companyName,city,scope);
        });
        $("#nextPage").on("click",$(".col-lg-8"),function () {
            var pageNum = $("#nextPage").attr("data-id");
            if(pageNum>${pageInfo.pages}){
                pageNum = ${pageInfo.pages};
            }
            var companyName = $("#companyName").val();
            var city = $("#city").val();
            var scope = $("#scope").val();
            getValue(pageNum,companyName,city,scope);
        });


    });
</script>

<jsp:include page="../inc/footer.jsp"></jsp:include>
